// pages/search/search.js
import request from '../../utils/request'
let isSend = false // 节流的标识
Page({

  /**
   * 页面的初始数据
   */
  data: {
    placeholderContent: '', // 默认的搜索提示关键词
    hotList: [], // 热词
    searchContent: '', // 收集搜索框中的内容
    searchList: [], // 搜索列表数据
    historyList:[] // 历史记录
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取提示关键词和热词
    this.initData()
    // 获取历史记录
    this.getHistoryListData()
  },
  async initData () {
    const placeholderContentData = await request('/search/default')
    const hotListData = await request('/search/hot/detail')
    // 更新数据
    this.setData({
      placeholderContent: placeholderContentData.data.realkeyword,
      hotList: hotListData.data
    })
  },
  // 收集文本框中的数据,然后调用接口,发送请求,获取搜索列表数据
  handlerSearchContent (event) {
    // 获取收集到的数据,清掉两端的空格
    const searchContent = event.detail.value.trim()
    // 更新数据
    this.setData({
      searchContent
    })
    if (isSend) { 
      return
    }
    isSend = true
    // 调用方法获取搜索列表数据
    this.getSearchContentList()
    setTimeout(() => { 
      isSend = false
    },200)
  },
  // 获取搜索列表数据的方法
  async getSearchContentList () {
    // 获取搜索框中的内容
    const { searchContent ,historyList} = this.data
    // 文本框中没有数据,之前搜索到的列表数据也应该清空
    if (!searchContent) { 
      this.setData({
        searchList:[]
      })
      return
    }
    const searchListData = await request('/search', { keywords: searchContent, limit: 10 })
    // 更新搜索列表数据
    this.setData({
      searchList:searchListData.result.songs
    })
    // 判断
    if (historyList.indexOf(searchContent) !== -1) { 
      // 此时历史记录的数组中有这个新录入的数据,就把这个数据移除
      historyList.splice(historyList.indexOf(searchContent),1)
    }
    // 把这个新的数据重新的插入到数组的第一个位置
    historyList.unshift(searchContent)
    // 更新数据
    this.setData({
      historyList
    })
    // 缓存历史记录数据
    wx.setStorageSync('historyListData',historyList)
  },
  // 获取历史记录的数据
  getHistoryListData () { 
    // 从缓存中读取历史记录
    const historyList = wx.getStorageSync('historyListData')
    // 判断是否存在
    if (historyList) { 
      // 更新数据
      this.setData({
        historyList
      })
    }
  },
  // 移除历史记录数据
  deleteHistory () { 
    wx.showModal({
      title: '删除提示',
      content: '您确定要删除历史记录吗',
      success: (res)=> {
        if (res.confirm) {
          // 更新数据
          this.setData({
            historyList:[]
          })
          // 清掉缓存
          wx.removeStorageSync('historyListData')
        } 
      }
    })
  },
  // 清空文本框中的数据
  clear () { 
    console.log('测试')
    this.setData({
      searchContent: '',
      searchList:[]
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})